12. HTML APIs Introduction

I. Geolocation API

Geolocation API se hum user ka location (latitude & longitude) browser se access kar sakte hain.

<button onclick="getLocation()">Get My Location</button> <p id="geo"></p> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById("geo").innerText = "Geolocation not supported."; } } function showPosition(position) { document.getElementById("geo").innerText = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude; } </script> Run Code

II. Drag and Drop

Drag and Drop API se hum kisi element ko mouse se uthakar dusri jagah le ja sakte hain.

<div id="drag1" draggable="true" ondragstart="drag(event)" style="width:100px;height:100px;background:#f90;border-radius:8px;text-align:center;line-height:100px;"> Drag me </div> <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:200px;height:100px;border:2px dashed #007bff;margin-top:20px;text-align:center;line-height:100px;"> Drop here </div> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> Run Code

III. Web Storage (localStorage)

Web Storage API se hum browser mein data store kar sakte hain without server interaction. localStorage data ko save rakhta hai browser close hone ke baad bhi.

<input type="text" id="nameInput" placeholder="Enter your name"> <button onclick="saveName()">Save</button> <p id="savedName"></p> <script> function saveName() { const name = document.getElementById("nameInput").value; localStorage.setItem("userName", name); showName(); } function showName() { const name = localStorage.getItem("userName"); if (name) { document.getElementById("savedName").innerText = "Saved Name: " + name; } } showName(); </script> Run Code